<template>
  <div class="user-management">
    <h2>用户管理</h2>
    <p>管理平台用户信息，可进行用户查询、编辑、删除等操作。</p>
    <div class="search-bar">
      <input v-model="search" placeholder="输入用户名或邮箱查询" />
      <button @click="fetchUsers">查询</button>
      <button @click="resetSearch">重置</button>
      <button @click="showAdd = true">添加用户</button>
    </div>
    <table>
      <thead>
        <tr><th>用户名</th><th>邮箱</th><th>角色</th><th>状态</th><th>操作</th></tr>
      </thead>
      <tbody>
        <tr v-for="user in filteredUsers" :key="user.id">
          <td v-if="editId !== user.id">{{ user.username }}</td>
          <td v-else><input v-model="editUser.username" /></td>
          <td v-if="editId !== user.id">{{ user.email }}</td>
          <td v-else><input v-model="editUser.email" /></td>
          <td v-if="editId !== user.id">{{ user.role }}</td>
          <td v-else>
            <select v-model="editUser.role">
              <option value="admin">管理员</option>
              <option value="manager">管理层</option>
              <option value="user">普通用户</option>
            </select>
          </td>
          <td v-if="editId !== user.id">
            <span :style="{color: user.active ? 'green' : 'red'}">{{ user.active ? '活跃' : '禁用' }}</span>
          </td>
          <td v-else>
            <select v-model="editUser.active">
              <option :value="true">活跃</option>
              <option :value="false">禁用</option>
            </select>
          </td>
          <td>
            <button v-if="editId !== user.id" @click="startEdit(user)">编辑</button>
            <button v-if="editId === user.id" @click="saveEdit(user.id)">保存</button>
            <button v-if="editId === user.id" @click="cancelEdit">取消</button>
            <button @click="deleteUser(user.id)" style="color:#ff5252;">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <div v-if="showAdd" class="add-dialog">
      <h3>添加用户</h3>
      <input v-model="addUser.username" placeholder="用户名" />
      <input v-model="addUser.email" placeholder="邮箱" />
      <select v-model="addUser.role">
        <option value="admin">管理员</option>
        <option value="manager">管理层</option>
        <option value="user">普通用户</option>
      </select>
      <select v-model="addUser.active">
        <option :value="true">活跃</option>
        <option :value="false">禁用</option>
      </select>
      <button @click="addUserApi">确定</button>
      <button @click="showAdd = false">取消</button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
const users = ref([])
const search = ref('')
const showAdd = ref(false)
const addUser = ref({ username: '', email: '', role: 'user', active: true })
const editId = ref(null)
const editUser = ref({ username: '', email: '', role: 'user', active: true })

/**
 * 获取用户列表
 * - 实现功能：从后端获取所有用户的列表，并更新到前端的 users 变量中。
 * - 请求方法：GET
 * - 请求URL：http://47.108.221.119:5000/getwebuser
 */
 async function fetchUsers() {
  try {
    const res = await fetch('http://47.108.221.119:5000/getwebuser', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      }
    });

    if (!res.ok) {
      throw new Error('获取用户数据失败');
    }

    const data = await res.json();

    // ✅ 关键修改：将 status 字符串转为 active 布尔值
    const processedData = data.map(user => ({
      ...user,
      active: user.status === 'active'  // 'active' -> true, 'inactive' -> false
    }));

    users.value = processedData;
  } catch (error) {
    console.error('请求用户列表出错:', error);
    alert('无法从服务器加载用户列表，请检查网络或接口是否可用。');
  }
}

onMounted(fetchUsers)

/**
 * 计算属性，用于根据搜索条件过滤用户列表
 */
const filteredUsers = computed(() => {
  if (!search.value) return users.value
  return users.value.filter(u => u.username.includes(search.value) || u.email.includes(search.value))
})

/**
 * 重置搜索框
 */
function resetSearch() { search.value = '' }

/**
 * 开始编辑用户信息
 */
function startEdit(user) {
  editId.value = user.id
  editUser.value = { ...user }
}

/**
 * 保存编辑后的用户信息
 * - 实现功能：将编辑后的用户信息发送给后端进行更新。
 * - 请求方法：POST
 * - 请求URL：http://localhost:3001/api/user/update
 * - 请求体：包含用户ID和更新后的用户信息（用户名、邮箱、角色、状态）
 */
 async function saveEdit(id) {
  const userToUpdate = {
    id,
    username: editUser.value.username,
    role: editUser.value.role,
    status: editUser.value.status,
    email: editUser.value.email
  };

  try {
    const res = await fetch('http://47.108.221.119:5000/savewebuserdata', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(userToUpdate)
    });

    if (!res.ok) {
      throw new Error('保存失败');
    }

    editId.value = null;
    await fetchUsers(); // 刷新用户列表
  } catch (error) {
    console.error('保存用户信息出错:', error);
    alert('保存用户信息失败，请重试。');
  }
}

/**
 * 取消编辑
 */
function cancelEdit() { editId.value = null }

/**
 * 删除用户
 * - 实现功能：从后端删除指定ID的用户。
 * - 请求方法：POST
 * - 请求URL：http://localhost:3001/api/user/delete
 * - 请求体：包含要删除的用户ID
 */
 async function deleteUser(id) {
  if (!confirm('确定要删除该用户吗？')) return; // 增加确认弹窗

  try {
    const res = await fetch('http://47.108.221.119:5000/deletewebuserdata', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ id })
    });

    if (!res.ok) {
      throw new Error('删除失败');
    }

    await fetchUsers(); // 刷新用户列表
  } catch (error) {
    console.error('删除用户出错:', error);
    alert('删除用户失败，请重试。');
  }
}

/**
 * 添加新用户
 * - 实现功能：向后端发送新用户的详细信息以创建该用户。
 * - 请求方法：POST
 * - 请求URL：http://localhost:3001/api/user/add
 * - 请求体：包含新用户的用户名、邮箱、角色和状态
 */
 async function addUserApi() {
  if (!addUser.value.username || !addUser.value.email || !addUser.value.role) {
    alert('请填写所有必填项');
    return;
  }

  try {
    const res = await fetch('http://47.108.221.119:5000/addwebuserdata', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        username: addUser.value.username,
        email: addUser.value.email,
        role: addUser.value.role,
        active: addUser.value.active // 这里假设前端使用的是active字段
      })
    });

    if (!res.ok) {
      throw new Error('添加用户失败');
    }

    const result = await res.json();
    console.log(result.message); // 打印成功消息

    showAdd.value = false;
    addUser.value = { username: '', email: '', role: 'user', active: true };
    await fetchUsers(); // 刷新用户列表
  } catch (error) {
    console.error('添加用户出错:', error);
    alert('添加用户失败，请重试。');
  }
}
</script>


<style scoped>
.user-management { padding: 2rem; 
  color: #ffffff; /* 整体字体颜色设为黑色 */}
.search-bar { margin-bottom: 1rem; }
.search-bar input { padding: 0.3rem 0.7rem; border-radius: 4px; border: 1px solid #ccc; }
.search-bar button { margin-left: 0.5rem; padding: 0.3rem 1rem; border-radius: 4px; border: none; background: var(--theme-color, #42b983); color: #fff; cursor: pointer; }
.search-bar button:hover { background: var(--theme-color, #369870); filter: brightness(0.9); }
table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
th, td { border: 1px solid #ddd; padding: 0.5rem; text-align: left; }
th { background: #879099; }
button { margin-right: 0.5rem; }
.add-dialog { background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 1rem; margin: 1rem auto; max-width: 400px; box-shadow: 0 2px 8px #eee; }
.add-dialog input, .add-dialog select { margin: 0.3rem 0.5rem 0.3rem 0; padding: 0.3rem 0.7rem; border-radius: 4px; border: 1px solid #ccc; }
</style>
